<template>
  <AddOrEditDialog
    ref="addOrEditDialogRef"
    :form="form"
    title="教学班"
    :dialogWidth="650"
    :formLabelWidth="120"
    :formHeader="formHeader"
    :url="$urls.API_URL_BACKSTAGE_SCHOOLTEACHINGTASK_MANAGE"
    :action="action"
    @afterSubmitSuccess="afterSubmitSuccess"
  >
    <template #courseId>
      <el-select v-model="form.courseId">
        <el-option
          v-for="item in courseList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </template>
    <template #online>
      <el-radio-group v-model="form.online" class="ml-4">
        <el-radio label="true" size="large">是</el-radio>
        <el-radio label="false" size="large">否</el-radio>
      </el-radio-group>
    </template>
    <template #termId>
      <el-select v-model="form.termId">
        <el-option
          v-for="item in termList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </template>
  </AddOrEditDialog>
</template>

<script lang="ts" setup>
// 引入添加编辑模块
import AddOrEditDialog from '@/components/base/table/form/AddOrEditDialog.vue';
import {
  onMounted,
  defineExpose, defineProps, getCurrentInstance, reactive, ref, withDefaults,
} from 'vue';
// 引入表格相关
import { FormHeader, TableData } from '@/types/interface/base_interface';
// 引入SchoolTeachingClass对象,教学班
import { SchoolTeachingClass, TeachingClass } from '@/types/interface/school_interface';
import Request from '@/api/request/request';

const { proxy } = getCurrentInstance();

// 接收父容器参数
interface Props {
  table: TableData, // 偷懒写法
  action?: string, // 表单的处理类型，post表示添加，put表示编辑
}

const props = withDefaults(defineProps<Props>(), {
  action: 'post',
});

// 定义表单元素
const formHeader = ref<FormHeader[]>([
  {
    label: '教学班名称',
    prop: 'className',
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '所属课程',
    prop: 'courseId',
    type: 'custom',
    rules: [{
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    ],
  },
  {
    label: '所属学期',
    prop: 'termId',
    type: 'custom',
    rules: [{
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    ],
  },
  {
    label: '是否为网络课',
    prop: 'online',
    type: 'custom',
    rules: [{
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    ],
  },
]);

const courseList = ref();
const termList = ref();
const gatData = async () => {
  let resData: any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLCOURSE_COURSE_MANAGE).get();
  if (resData.success) {
    courseList.value = resData.data;
  }
  resData = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLTERM_MANAGE).get();
  if (resData.success) {
    termList.value = resData.data.data;
  }
};
onMounted(async () => {
  await gatData();
});

// 表单对象
const form = ref<TeachingClass>();
const addOrEditDialogRef = ref(); // 表单ref对象
let formInit: TeachingClass; // 记录表单第一次传入的值,用于表单重置恢复初始值使用
// 打开对话框，供父组件调用，传入表单对象
const openDialog = (teachingClass: TeachingClass) => {
  formInit = { ...teachingClass }; // 获取初始值，这里要做深拷贝，避免与form对象引用的地址一致，导致无法恢复初始值
  form.value = teachingClass;
  if (form.value.schoolCourse) {
    form.value.courseId = form.value.schoolCourse.id;
  }
  if (form.value.schoolTerm) {
    form.value.termId = form.value.schoolTerm.id;
  }
  console.log(form);
  // 打开对话框
  addOrEditDialogRef.value!.openDialog();
};
// 提交表单成功后的钩子函数
const afterSubmitSuccess = () => {
  // 让表单恢复为传入对象时的初始值，注意要深度拷贝，避免初始值收到污染
  form.value = { ...formInit };
};
// 暴露组件给父容器使用
defineExpose({
  openDialog,
});
</script>
<style lang="scss" scoped>

</style>
